<template>
  <div>
    <el-card class="card">
      <div slot="header">条件查询</div>
      <div>
        <el-form
          ref="searchForm"
          class="search-form"
          :model="searchForm"
          label-width="100px"
          size="mini"
        >
          <el-row :gutter="6">
            <el-col :span="6" :offset="0">
              <el-form-item label="订单编号">
                <el-input
                  v-model="searchForm.orderSn"
                  style="width: 200px"
                  placeholder="请填写订单编号"
                  size="mini"
                  clearable
                />
              </el-form-item>
            </el-col>

            <el-col :span="6" :offset="0">
              <el-form-item label="退单状态">
                <el-select
                  v-model="searchForm.status"
                  class="search-input"
                  size="small"
                  clearable
                  placeholder="退单状态"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="20">
              <el-button
                style="margin: 0 20px"
                type="default"
                size="mini"
                @click="Reset"
                >重置</el-button
              >
              <el-button type="primary" size="mini" @click="Search"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="card" shadow="never">
      <el-table :data="backList" border style="width: 100%">
        <el-table-column type="index" label="#" fixed="left" />

        <el-table-column
          align="center"
          label="订单编号"
          prop="orderSn"
          width="250"
        >
          <template slot-scope="scope">
            <!-- <router-link></router-link> -->
            <span> {{ scope.row.orderSn }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="退单状态" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="danger" effect="dark">{{
              statusList[scope.row.status].name
            }}</el-tag>
            <el-tag
              v-else-if="scope.row.status === 1"
              type="warning"
              effect="dark"
              >{{ statusList[scope.row.status].name }}</el-tag
            >
            <el-tag v-else-if="scope.row.status === 2">{{
              statusList[scope.row.status].name
            }}</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="info">{{
              statusList[scope.row.status].name
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="描述"
          prop="description"
          width="250"
        />
        <el-table-column
          align="center"
          label="退单原因"
          prop="reason"
          width="250"
        />
        <el-table-column
          align="center"
          label="商品名称"
          width="150"
          prop="productName"
        />
        <el-table-column
          align="center"
          label="商品属性"
          width="190"
          prop="productAttr"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.productAttr | initAttrArr }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="商家备注"
          width="150"
          prop="handleNote"
        />
        <el-table-column
          align="center"
          label="添加时间"
          prop="createTime"
          width="250"
        />

        <el-table-column fixed="right" align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 150px"
              size="mini"
              @click="goEdit(scope.row)"
            >
              <i
                style="margin-right: 6px"
                class="el-icon-view"
              />查看订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { findBack } from "@/api/back";
import minx from "@/minx/index.js";
export default {
  props: {},
  mixins: [minx],
  data() {
    return {
      backList: [],
      statusList: [
        { name: "待处理", id: 0 },
        { name: "退货中", id: 1 },
        { name: "已完成", id: 2 },
        { name: "已拒绝", id: 3 },
      ],
      searchForm: {
        orderSn: "",

        status: "",
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    async init() {
      this.backList = (
        await findBack(this.page.currentPage, this.page.size, this.searchForm)
      ).data.rows;
      this.page.total = (
        await findBack(this.page.currentPage, this.page.size, this.searchForm)
      ).data.total;
    },
    Search() {
      this.page.currentPage = 1;
      this.init();
    },
    Reset() {
      this.searchForm = {};
       this.init();
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.page.currentPage = 1;
      this.init();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.init();
    },
    goEdit(el){
      this.$router.push({path:'/order/back/detail/',query:{ids:el.id}})
    }
  },
  components: {},
  filters: {
    initAttrArr(v) {
      var reg = /^\[\{\"/gi;
      if (reg.test(v)) {
        const arr = JSON.parse(v);
        let str = "";
        arr.forEach((element) => {
          str = str + element.key + ":" + element.value + " ";
        });
        return str;
      } else {
        return v;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
